Fix the following 2 code review issues. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 2
apps/code/src/renderer/features/onboarding/components/FeatureBentoCard.tsx:35
Double space in class string when `active` is false. The template literal concatenates an empty string for the inactive case and then the `className` prop, producing `"feature-bento-card  col-span-4"` (two spaces). While browsers normalise this, the project rule asks us to avoid double spaces from conditional string concatenation.

```suggestion
      className={`feature-bento-card${active ? " feature-bento-card--active" : ""} ${className}`}
```

### Issue 2 of 2
apps/code/src/renderer/features/onboarding/components/FeatureBentoCard.tsx:46-54
The `Flex` wrapper around the icon only ever contains a single child (`div.feature-bento-card__icon`), so `gap="2"` and `direction="column"` are superfluous — they have no visible effect. Following the simplicity rule of "no superfluous parts", these props can be dropped.

```suggestion
        <Flex
          align="center"
          justify="center"
          className="relative z-10 text-(--gray-9)"
        >
          <div className="feature-bento-card__icon">{icon}</div>
        </Flex>
```

Fix the following 1 code review issue. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 1
apps/code/src/renderer/features/onboarding/components/FeatureBentoCard.tsx:46-50
The `text-(--gray-9)` class on the `Flex` wrapper is dead code — it sets `color: var(--gray-9)` on the container, but the child `div.feature-bento-card__icon` immediately overrides it with `color: var(--gray-12)` (and on hover/active, `color: var(--accent-11)`). The icon SVG inherits from the `div`, so `--gray-9` is never actually applied. Removing it satisfies the "no superfluous parts" simplicity rule.

```suggestion
        <Flex
          align="center"
          justify="center"
          className="relative z-10"
        >
```